<template>
    <div class="edit-popup">
        <popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
            @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="110px" :rules="formRules">
                <el-form-item label="头像" prop="avatar">
                    <div>
                        <div>
                            <material-picker v-model="formData.avatar" :limit="1" />
                        </div>
                        <div class="form-tips">请上传用户头像</div>
                    </div>
                </el-form-item>

                <el-form-item label="机构名称" prop="nickname">
                    <el-input v-model="formData.nickname" placeholder="请输入机构名称" clearable />
                </el-form-item>
                <el-form-item label="机构账号" prop="account">
                    <el-input v-model="formData.account" placeholder="请输入机构账号" clearable />
                </el-form-item>
                <el-form-item label="负责人" prop="real_name">
                    <el-input v-model="formData.real_name" placeholder="请输入负责人" clearable />
                </el-form-item>
                <el-form-item label="负责人电话" prop="mobile">
                    <el-input v-model="formData.mobile" placeholder="请输入负责人电话" clearable />
                </el-form-item>

                <el-form-item label="机构密码" prop="password">
                    <el-input v-model="formData.password" type="password" placeholder="请输入机构密码" clearable />
                </el-form-item>
                <el-form-item label="机构确认密码" prop="password_confirm">
                    <el-input v-model="formData.password_confirm" type="password" placeholder="请输入确认密码" clearable />
                </el-form-item>
                <el-form-item label="服务到期日期" prop="end_time">
                    <el-date-picker v-model="formData.end_time" type="datetime" placeholder="选择日期和时间"
                        value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="shortcuts" />
                </el-form-item>




                <el-form-item label="是否禁用" prop="is_disable">
                    <el-switch v-model="formData.is_disable" :active-value="1" :inactive-value="0" />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import { userAdd } from "@/api/consumer";
import Popup from "@/components/popup/index.vue";
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const popupTitle = computed(() => {
    return mode.value == "edit" ? "编辑用户" : "新增用户";
});
const shortcuts = [
    {
        text: "今天",
        value: new Date(),
    },
    {
        text: "昨天",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date;
        },
    },
    {
        text: "一周前",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date;
        },
    },
];
const formData = reactive({
    avatar: "",
    real_name: "",
    nickname: "",
    account: "",
    password: "",
    password_confirm: "",
    mobile: "",
    sex: 1,
    copyright_switch: 1,
    tp_storage: 2,
    channel: 4,
    is_disable: 0,
    end_time: 0,
});

const formRules = {
    avatar: [
        {
            message: "请上传头像",
            trigger: ["change"],
        },
    ],
    real_name: [
        {
            required: true,
            message: "请填写负责人姓名",
            trigger: ["blur"],
        },
    ],
    nickname: [
        {
            required: true,
            message: "请填写机构昵称",
            trigger: ["blur"],
        },
    ],
    mobile: [
        {
            required: true,
            message: "请填写负责人电话",
            trigger: ["blur"],
        },
    ],
    account: [
        {
            required: true,
            message: "请填写机构账号",
            trigger: ["blur"],
        },
    ],
    password: [
        {
            required: true,
            message: "请填写用户密码",
            trigger: ["blur"],
        },
    ],
    password_confirm: [
        {
            required: true,
            message: "请填写用户确认密码",
            trigger: ["blur"],
        },
    ],
};

const handleSubmit = async () => {
    await formRef.value?.validate();
    await userAdd(formData);
    popupRef.value?.close();
    emit("success");
};

const open = (type = "add") => {
    mode.value = type;
    popupRef.value?.open();
};

const handleClose = () => {
    emit("close");
};

defineExpose({
    open,
});
</script>
